<template>
  <view class="custom-switch" @click="toggleSwitch">
    <view class="switch-track" :style="{ backgroundColor: isChecked ? '#13227A' : '#999' }">
      <view class="switch-thumb" :style="{ transform: isChecked ? 'translateX(100%)' : 'translateX(0)' }"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    checked: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isChecked: this.checked
    };
  },
  methods: {
    toggleSwitch() {
      this.isChecked = !this.isChecked;
      this.$emit('change', { detail: { value: this.isChecked } });
    }
  }
};
</script>

<style scoped>
.custom-switch {
  display: inline-block;
}

.switch-track {
  width: 50px;
  height: 25px;
  border-radius: 15px;
  background-color: #999;
  position: relative;
  transition: background-color 0.3s;
}

.switch-thumb {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: transform 0.3s;
}
</style>